<template>
  <div class="myComplexForm">
    <div v-for="(item, key) in formData" :key="key" class="form-item">
      <!-- 注意事项 -->
      <div v-if="item.type == 'words' && !item.hidden" class="words">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div v-for="(word, k) in item.html" :key="k" class="list-item">
            <div>{{ k }}、</div>
            <div v-html="word" style="line-height: 20px"></div>
          </div>
        </div>
      </div>
      <!-- 输入框 -->
      <div v-if="item.type == 'input' && !item.hidden" class="input">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <input
            type="text"
            :value="item.value"
            :placeholder="item.placeholder"
            @input="onInput($event, key)"
          />
          <div v-if="item.desc" class="desc" v-html="item.desc"></div>
        </div>
      </div>
      <!-- 按钮 -->
      <div v-if="item.type == 'button' && !item.hidden" class="btn">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div v-for="(btn, k) in item.list" :key="k" class="list-item">
            <my-button
              v-if="btn.type == 'normal'"
              :bgc="btn.bgc"
              :fontColor="btn.fontColor"
              :border="btn.border"
              @click="handleClickBtn(btn, key, k)"
              >{{ btn.btnText }}</my-button
            >
          </div>
          <div v-if="item.desc" class="desc" v-html="item.desc"></div>
        </div>
      </div>

      <!-- 选择框 -->
      <div v-if="item.type == 'select' && !item.hidden" class="select">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <el-select
            :value="item.value"
            :placeholder="item.placeholder"
            @change="selectChange($event, key)"
          >
            <el-option
              v-for="op in item.list"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 单选框 -->
      <div v-if="item.type == 'radio' && !item.hidden" class="radio">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div class="myRadioGroup">
            <div
              v-for="(radio, index) in item.list"
              :key="index"
              class="radio-item"
            >
              <div
                class="radio-icon"
                :class="{ active: radio.value == item.value.value }"
                @click="handleClickRadio(radio, key)"
              ></div>
              <div class="label">
                {{ radio.label }}
              </div>
            </div>
          </div>
          <div class="desc" v-html="item.desc"></div>
        </div>
      </div>
      <!-- input 组 小程序 三个输入框-->
      <div v-if="item.type == 'inputGroup' && !item.hidden" class="inputGroup">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div v-for="(com, k) in item.list" :key="k">
            <div v-if="com.type == 'input'" class="input-block">
              <div class="input-label">{{ com.label }}</div>
              <input
                type="text"
                :value="com.value"
                :placeholder="com.placeholder"
                @input="inputGroupChange($event, key, k)"
              />
            </div>
            <div v-if="com.type == 'button'">
              <my-button :bgc="com.bgc" :fontColor="com.fontColor">{{
                com.text
              }}</my-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 地点选择 -->
      <div v-if="item.type == 'dialog' && !item.hidden" class="dialog">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <input
            type="text"
            :value="item.value.poi_name"
            disabled
            :placeholder="item.placeholder"
          />
          <my-button
            bgc="#0480FF "
            fontColor="#fff6ed"
            @click="showDialog(key)"
            >{{ item.btnText }}</my-button
          >
        </div>
      </div>
      <!-- 图片上传 -->
      <div v-if="item.type == 'fileImage' && !item.hidden" class="file-image">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <label :for="key">
            <div v-if="!item.value" class="iconfont icon-add">&#xe60d;</div>
            <img
              v-if="item.value"
              :src="item.value"
              alt=""
              class="preview-image"
            />
            <div
              v-if="item.value"
              class="del-block"
              @click.prevent="deleteImage(key)"
            >
              <div class="iconfont icon-del">&#xe650;</div>
            </div>
          </label>
          <input
            type="file"
            accept="image/*"
            :id="key"
            style="display: none"
            @change="uploadFile($event, key)"
          />
        </div>
      </div>
      <!-- 模板数据 -->
      <div
        v-if="item.type == 'tmpl' && !item.hidden && item.value"
        class="file-tmpl"
      >
        <div class="label">
          <div class="text">{{ item.label }}</div>
        </div>
        <div class="list">
          <div v-for="(item, key) in item.value" :key="key" class="list-item">
            <div
              v-if="
                (item.type == 'image' || item.type == 'images') && item.value
              "
              class="tmpl-img"
            >
              <div class="title">{{ item.title }}</div>
              <img
                v-for="(img, key) in item.arr.filter((v) => v)"
                :key="key"
                class="img"
                :src="img"
                alt=""
              />
            </div>
            <div v-if="item.type == 'text' && item.value" class="tmpl-text">
              <div class="title">{{ item.title }}</div>
              <div class="tmpl-text-list">
                <input type="text" :value="item.value" disabled />
              </div>
            </div>
            <div v-if="item.type == 'color' && item.value" class="tmpl-text">
              <div class="title">{{ item.title }}</div>
              <div class="tmpl-text-list">
                <input type="text" :value="item.value" disabled />
              </div>
            </div>
            <div v-if="item.type == 'music' && item.value" class="tmpl-text">
              <div class="title">{{ item.title }}</div>
              <div class="tmpl-text-list">
                <input type="text" :value="item.value" disabled />
              </div>
            </div>
            <div v-if="item.type == 'videos' && item.value" class="tmpl-audio">
              <div class="title">{{ item.title }}</div>
              <div class="tmpl-audio-list">
                <div
                  v-for="(aud, key) in item.arr.filter((v) => v)"
                  :key="key"
                  class="aud-item"
                >
                  <input type="text" :value="aud" disabled />
                </div>
              </div>
            </div>
            <div v-if="item.type == 'musics' && item.value" class="tmpl-audio">
              <div class="title">{{ item.title }}</div>
              <div class="tmpl-audio-list">
                <div
                  v-for="(aud, key) in item.arr.filter((v) => v)"
                  :key="key"
                  class="aud-item"
                >
                  <input type="text" :value="aud" disabled />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 抖音 快手二维码 -->
      <div v-if="item.type == 'qrCode' && !item.hidden" class="file-qrCode">
        <div class="label">
          <div class="text">{{ item.label }}</div>
        </div>
        <div class="list">
          <div v-for="(item, key) in item.list" :key="key" class="image">
            <img :src="item.url" alt="" />
          </div>
        </div>
      </div>
      <!-- 视频 上传 -->
      <div v-if="item.type == 'fileVedio' && !item.hidden" class="file-vedio">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div class="input-block">
            <input
              type="text"
              :placeholder="item.placeholder"
              :value="item.value"
              disabled
            />
            <!-- <div class="status">{{ item.progress }}</div> -->
          </div>
          <label for="video">
            <span class="iconfont icon-upload">&#xe695;</span>
            <span>上传</span>
          </label>
          <input
            type="file"
            accept="video/*"
            id="video"
            style="display: none"
            @change="uploadFile($event, key)"
          />
        </div>
      </div>
      <!-- 音频 上传 -->
      <div v-if="item.type == 'fileAudio' && !item.hidden" class="file-audio">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div class="input-block">
            <input
              type="text"
              :placeholder="item.placeholder"
              :value="item.value"
              disabled
            />
            <div class="status">{{ item.progress }}</div>
          </div>
          <label for="audio">
            <span class="iconfont icon-upload">&#xe695;</span>
            <span>上传</span>
          </label>

          <input
            type="file"
            accept="audio/*"
            id="audio"
            style="display: none"
            @change="uploadFile($event, key)"
          />
        </div>
      </div>
      <!-- 已选账号 -->
      <div v-if="item.type == 'btnList' && !item.hidden" class="btn-list">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div v-for="(user, i) in item.value" :key="i" class="btn-list-item">
            <div>
              {{ user.nickname }}
            </div>
            <div class="bg" @click="del(item, key, i)">
              <div class="iconfont icon-close">&#xe650;</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 多文件 视频上传 -->
      <div v-if="item.type == 'videos' && !item.hidden" class="videos">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div class="list-tip">
            <div class="upload-image-btn">
              <label :for="key">
                <div class="iconfont icon-add">&#xe60d;</div>
              </label>
              <input
                type="file"
                accept="video/*"
                :id="key"
                multiple
                style="display: none"
                @change="uploadVideo($event, key)"
              />
            </div>
            <div class="tiptext">{{ item.title }}</div>
          </div>
          <div class="file-list">
            <div
              v-for="(file, k) in item.files"
              :key="k"
              class="file-list-item"
            >
              <video :src="file" style="width: 100%; height: 100%"></video>
              <div class="iconfont icon-del" @click="deleteVideo(key, k)">
                &#xe650;
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- tab 切换 -->
      <div v-if="item.type == 'tab' && !item.hidden" class="tab">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <div class="my-tabs">
            <div
              v-for="(tab, k) in item.list"
              :key="k"
              class="my-tabs-item"
              :class="{ active: item.value == k }"
              @click="handleClickTab(key, k)"
            >
              {{ tab.label }}
            </div>
          </div>
        </div>
      </div>
      <!-- 级联选择  -->
      <div v-if="item.type == 'cascader' && !item.hidden" class="cascader">
        <div class="label">
          <div class="text">{{ item.label }}</div>
          <div v-if="item.required" class="icon">*</div>
        </div>
        <div class="list">
          <el-cascader
            :value="item.value"
            :options="item.list"
            @change="changeCascader($event, key)"
          ></el-cascader>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
export default {
  components: {
    myButton,
  },
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    changeCascader(value, key) {
      this.$emit("changeFormData", {
        key,
        value,
      });
    },
    handleClickTab(key, k) {
      this.$emit("changeFormData", {
        key,
        value: k,
      });
      this.$emit("handleClickBtn", k);
    },
    uploadVideo(e, key) {
      let f = e.target.files;
      let files = {};
      for (let k in f) {
        if (k == "length" || k == "item") {
          continue;
        }
        files[k] = f[k];
      }
      e.target.value = "";
      this.$emit("uploadMultiple", {
        files,
        key,
      });
    },
    deleteVideo(key, k) {
      this.$emit("deleteMultiple", {
        k,
        key,
      });
    },
    del(item, key, i) {
      let value = JSON.parse(JSON.stringify(item.value));
      value.splice(i, 1);
      this.$emit("changeFormData", {
        key,
        value,
      });
    },
    onInput(e, key) {
      this.$emit("changeFormData", {
        key,
        value: e.target.value,
      });
    },
    handleClickRadio(val, key) {
      this.$emit("changeFormData", {
        key,
        value: val,
      });
    },
    handleClickBtn(btn, key, k) {
      this.$emit("handleClickBtn", k);
    },
    selectChange(e, key) {
      this.$emit("changeFormData", {
        key,
        value: e,
      });
    },
    // input 组 输入事件
    inputGroupChange(e, key, k) {
      this.$emit("changeFormData", {
        value: e.target.value,
        key,
        k,
      });
    },
    // 显示选择地点弹窗  1
    showDialog(key) {
      this.$emit("handleClickBtn", key);
    },
    async uploadFile(e, key) {
      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file, file.name);
      let res = await this.$api.uploadFile(formData);
      e.target.value = "";
      this.$emit("changeFormData", {
        value: res.data.url,
        key,
        progress: res.msg,
      });
    },
    deleteImage(key) {
      this.$emit("changeFormData", {
        value: "",
        key,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.myComplexForm {
  width: 100%;
  height: 100%;
}
.form-item {
  width: 100%;
  .label {
    display: flex;
    width: 160px;
    .icon {
      color: #c9151e;
    }
    .text {
      color: #333;
      font-size: 18px;
    }
  }
}
input {
  color: #333 !important;
  font-size: 14px;
}
// cascader
.cascader {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    /deep/ .el-cascader {
      width: 75%;
      height: 48px;
      .el-input {
        height: 100%;
        .el-input__inner {
          height: 100%;
          border: 1px solid #d7d7d7;
          color: #333;
          &::-webkit-input-placeholder {
            color: #808595;
            font-size: 14px;
          }
          &:focus {
            border: 1px solid #ffba62;
          }
        }
      }
    }
  }
}
.tab {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .my-tabs {
      display: flex;
      align-items: center;
      height: 100%;
      .my-tabs-item {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        color: #387cf7;
        border: 1px solid #dcdcdf;
        border-radius: 5px;
        margin-right: 30px;
        font-size: 16px;
      }
      .active {
        border: none;
        color: #fff;
        background: #387cf7;
      }
    }
  }
}
.videos {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  .label {
    flex-shrink: 0;
    width: 140px;
  }
  .list {
    // display: flex;
    align-content: center;

    width: 100%;
    .list-tip {
      display: flex;
      margin-bottom: 15px;
    }
    .file-list {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
      .file-list-item {
        position: relative;
        width: 78px;
        height: 78px;
        border-radius: 5px;
        border: 1px solid #387cf7;
        margin: 0px 15px 15px 0px;
        &:hover .icon-del {
          display: block;
        }
        .icon-del {
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          line-height: 78px;
          border-radius: 5px;
          font-size: 28px;
          color: #fff;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.4);
          user-select: none;
          cursor: pointer;
        }
      }
    }
    .tiptext {
      width: 100%;
      padding-top: 60px;
      box-sizing: border-box;
    }
    .upload-image-btn {
      flex-shrink: 0;
      width: 100px;
      height: 80px;
      margin-right: 10px;
      label {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        user-select: none;
        cursor: pointer;
        padding: 5px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #387cf7;
        .icon-add {
          color: #387cf7;
          font-size: 32px;
        }
      }
    }
  }
}
// btn-list
.btn-list {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .btn-list-item {
      position: relative;
      height: 38px;
      line-height: 38px;
      padding: 0 15px;
      border: 1px solid #387cf7;
      border-radius: 5px;
      margin-right: 15px;
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      &:hover .bg {
        display: block;
      }
      .bg {
        display: none;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        .icon-close {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }
}
.file-tmpl {
  display: flex;
  .label {
    width: 140px;
    flex-shrink: 0;
  }
  .list {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .tmpl-img {
        display: flex;
        align-items: center;
        .title {
          flex-shrink: 0;
          width: 150px;
        }
        img {
          width: 120px;
          height: 120px;
          object-fit: contain;
          margin-right: 15px;
          border: 1px solid #e0dfdf;
          border-radius: 10px;
        }
      }
      .tmpl-text {
        display: flex;
        .title {
          width: 150px;
          height: 45px;
          line-height: 45px;
          white-space: nowrap;
        }
        .tmpl-text-list {
          input {
            width: 600px;
            height: 45px;
            padding: 0 10px;
            border: 1px solid #c7c8ca;
            line-height: 45px;
            border-radius: 10px;
          }
        }
      }
      .tmpl-audio {
        display: flex;
        .title {
          width: 150px;
          height: 45px;
          flex-shrink: 0;
          line-height: 45px;
          white-space: nowrap;
        }
        .tmpl-audio-list {
          .aud-item {
            width: 500px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            input {
              width: 760px;
              height: 45px;
              padding: 0 10px;
              border: 1px solid #c7c8ca;
              line-height: 45px;
              border-radius: 10px;
            }
          }
        }
      }
    }
  }
}
// file-vedio file-audio
.file-audio,
.file-vedio {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .input-block {
      position: relative;
      flex-shrink: 1;
      width: 75%;
      height: 48px;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      input {
        width: 100%;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        border: none;
      }
      .status {
        position: absolute;
        right: 10px;
        bottom: -30px;
      }
    }
    label {
      width: 80px;
      height: 38px;
      border-radius: 5px;
      text-align: center;
      line-height: 38px;
      color: #387cf7;
      background-color: #fff;
      border: 1px solid #dcdcdf;
      cursor: pointer;
      user-select: none;
      margin-left: 15px;
    }
  }
}
// file-image
.file-image {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    label {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180px;
      height: 180px;
      border: 2px solid #e7e7e7;
      border-radius: 15px;
      user-select: none;
      cursor: pointer;
      &:hover .del-block {
        display: flex;
      }
      .icon-add {
        color: #e7e7e7;
        font-size: 80px;
      }
      .del-block {
        position: absolute;
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 15px;
        .icon-del {
          color: #fff;
          font-size: 36px;
        }
      }
      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 15px;
      }
    }
  }
}
.file-qrCode {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .image {
      width: 120px;
      object-fit: contain;
      margin-right: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// dialog
.dialog {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    input {
      width: 400px;
      height: 48px;
      padding: 0 10px;
      box-sizing: border-box;
      text-align: center;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      margin-right: 15px;
    }
    .button {
      background-color: #0480ff;
    }
  }
}
// inputGroup
.inputGroup {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 40px;

  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .input-block {
      display: flex;
      align-items: center;
      margin-right: 15px;
      .input-label {
        width: 70px;
        color: #333;
        font-size: 16px;
      }
      input {
        width: 226px;
        height: 36px;
        padding: 0 10px;
        box-sizing: border-box;
        outline: none;
        border: 1px solid #d7d7d7;
      }
    }
  }
}
// radio
.radio {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .myRadioGroup {
      display: flex;
      align-items: center;
      height: 100%;
      .radio-item {
        display: flex;
        align-items: center;
        margin-right: 15px;
        .radio-icon {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 1px solid #ccc;
          transition: all 0.1s;
          margin-right: 15px;
          cursor: pointer;
          &:hover {
            border: 1px solid #387cf7;
          }
        }
        .label {
          font-size: 16px;
        }
        .active {
          position: relative;
          background-color: #387cf7;
          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #fff;
          }
        }
      }
    }
  }
}
// select
.select {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /deep/ .el-select {
      width: 75%;
      height: 48px;
      .el-input {
        height: 100%;
        .el-input__inner {
          height: 100%;
          border: 1px solid #d7d7d7;
          color: #333;
          &::-webkit-input-placeholder {
            color: #808595;
            font-size: 14px;
          }
          &:focus {
            border: 1px solid #387cf7;
          }
        }
      }
    }
  }
}

// button
.btn {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 142px;
      height: 36px;
      border-radius: 5px;
      cursor: pointer;
      color: #fff;
      margin-right: 15px;
      color: #ffba62;
      border: 1px solid #ffba62;
      &:hover {
        width: 144px;
        height: 38px;
        color: #fff;
        border: none;
        background: #ffba62;
      }
      .icon {
        font-size: 20px;
        margin-right: 3px;
      }
      .text {
        font-size: 16px;
      }
    }
    .button {
      width: 144px;
      margin-right: 15px;
    }
  }
}
// words
.words {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
  .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    .list-item {
      display: flex;
      color: #333;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
// input
.input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 85px;
  .list {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    input {
      width: 75%;
      height: 48px;
      padding: 0 10px;
      box-sizing: border-box;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      outline: none;
      &::-webkit-input-placeholder {
        color: #808595;
        font-size: 14px;
      }
      &:-moz-placeholder {
        color: #808595;
        font-size: 14px;
      }
      &::-moz-placeholder {
        color: #808595;
        font-size: 14px;
      }
      &:-ms-input-placeholder {
        color: #808595;
        font-size: 14px;
      }
    }
    .desc {
      position: absolute;
      left: 20px;
      top: 82px;
    }
  }
}
</style>
